<template>
  <!-- header 头部组件 -->
  <div class="header">
    <!-- 切换侧边栏按钮ok -->
    <div @click="changeIcon()">
      <i class="icons" :class="isShow ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
    </div>
    <!-- 文字 -->
    <div class="yu_ang">
      <img src=".././assets/img/yunangLogo.png" alt="" />
      <span>云昂工作室后台管理系统</span>
    </div>
    <!-- 右侧头像点击部分ok -->
    <div class="header-right">
      <el-dropdown>
        <span class="el-dropdown-link">
          <img :src="user_img" alt="" class="srcImg" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-switch-button"><span @click="exitLogin">退出登录</span></el-dropdown-item>
          <el-dropdown-item icon="el-icon-s-tools"><span @click="(dialogVisible = true)">修改密码</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- 修改用户密码 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <div class="password-content">
        <el-form :model="passwordForm" status-icon :rules="rules" ref="passwordFormRef" label-width="100px" @close="dialogClose">
          <el-form-item label="原密码" prop="formerPassword">
            <el-input type="password" v-model="passwordForm.formerPassword" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="pass">
            <el-input type="password" v-model="passwordForm.pass" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="passwordForm.checkPass" autocomplete="off" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleEditPassword()">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.passwordForm.checkPass !== '') {
          this.$refs.passwordForm.validateField('checkPass')
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passwordForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      passwordForm: {
        formerPassword: '',
        pass: '',
        checkPass: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' },
          { min: 6, message: '密码长度不小于6个字符', trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' },
          { min: 6, message: '密码长度不小于6个字符', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      elementIcon: 'el-icon-s-unfold',
      isShow: true,
      user_img:
        'https://ts1.cn.mm.bing.net/th/id/R-C.0de5b44e971903ee46acfd49c0b17552?rik=j6%2bKK2y228b9tw&riu=http%3a%2f%2ftupian.qqw21.com%2farticle%2fUploadPic%2f2019-1%2f201912319273191054.jpg&ehk=reufUoDmwyWsSjsHkEmJhkMfOTAIWAvfpUxq3QSeuxQ%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1'
    }
  },
  methods: {
    // 待补充1. 接收菜单路由currentMenu
    // 改变伸缩图标样式
    changeIcon () {
      this.isShow = !this.isShow
      // 调用 vuex属性中的 changeIsCollapse
      this.$store.commit('changeIsCollapse', !this.isShow)
    },

    /* 退出登录 */
    exitLogin () {
      this.$router.push('/login')
      // 清除会话存储中的 token 值
      // sessionStorage.removeItem('token')
      // sessionStorage.removeItem('userId')
      sessionStorage.clear()
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    dialogClose () {
      this.$refs.passwordFormRef.resetFields()
    },
    handleEditPassword () {
      this.dialogVisible = false
      this.$http({
        method: 'put',
        url: '/v1/oa/User/changePassword',
        params: {
          formerPassword: this.passwordForm.formerPassword,
          newPassword: this.passwordForm.pass,
          reNewPassword: this.passwordForm.checkPass,
          id: window.sessionStorage.getItem('userId')
        }
      }).then(res => {
        // console.log(res)
        if (res.data.code === 200) this.$message.success('密码修改成功')
        this.exitLogin()
      })
    }
    //
  }
}
</script>

<style lang="less" scoped>
.header {
  height: 60px;
  align-items: center;
  display: flex;
  justify-content: space-between;
  border-bottom: #f5f6f7 solid 2px;

  .yu_ang {
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 80px;
      height: 80px;
      vertical-align: middle;
    }

    span {
      display: inline-block;
      margin: 0 auto;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      font-size: 1.875rem;
      // margin-top: 1.25rem;
    }
  }
}

.icons {
  font-size: 28px;
  margin-right: 30px;
  vertical-align: middle;
}

.txtColor {
  color: #97a8be;
}

.header-right {
  margin-right: 20px;

  .srcImg {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}

/* 修改a标签的默认背景 */
a,
a:hover,
a:active,
a:visited,
a:link,
a:focus {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  color: #606266;
  background: none;
  text-decoration: none;
}
.password-content{
  .input{
    display: flex;
    margin: 15px 20px;
    span{
      min-width: 100px;
      line-height: 40px;
      height: 40px;
      text-align: center;
    }
  }
  .el-input{

  }
}
</style>
